<template>
  <div>
    <el-button >全部取消选择</el-button>
    <el-select v-model="paymode" class="m-2" placeholder="选择支付方式" style="margin: 0 15px 0 15px">
      <el-option
        v-for="item in options.value"
        :key="item.key"
        :label="item.name"
        :value="item.key"
      />
    </el-select>
    <el-button @click="toggleSelection()">立即支付</el-button>
  </div>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column property="productId" label="商品编号" width="120" />
    <el-table-column property="name" label="商品名称" width="120" />
    <el-table-column property="count" label="价格" show-overflow-tooltip />
  </el-table>
</template>
<script>
import { ref, reactive } from 'vue'
import axios from 'axios'
export default {
  name: 'ShopCar',
  setup () {
    const tableData = ref([])
    const options = reactive([])
    const getOptions = async () => {
      const result = await axios.get('http://localhost:8080/api/pay/mode/list')
      options.value = result.data.data
      console.log(options.value)
      console.log(options.value[0].name)
    }
    getOptions()
    const getTableData = async () => {
      const resultTable = await axios.get('http://localhost:8080/api/shop/car/list')
      tableData.value = resultTable.data.data
    }
    getTableData()
    const paymode = ref('选择支付方式')
    return {
      tableData,
      options,
      paymode
    }
  }
}
</script>
